<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>MOON</title>
    <link rel="stylesheet" th:href="@{/moon/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}"/>
</head>
<body class="bg-a">
<div class="container-fluid h-100" id="app">
    <div class="mt-2 h-75" id="chatbox" style="overflow: auto"></div>
    <div class="form-inline mt-3">
        <input id="rcv" type="text" class="form-control form-control-sm" placeholder="_to_grp:"
               th:value="${session.admin?.grpstr}"/>
        <input id="info" type="text" class="form-control form-control-sm w-50" placeholder="_消息内容"/>
        <button class="btn btn-sm btn-outline-danger ml-2" onclick="send();">发送</button>
    </div>
</div>
<!-- js -->
<script th:src="@{/moon/js/jquery.js}"></script>
<script th:src="@{/moon/js/vue.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:inline="javascript">
    //ws
    var api = "ws://" + location.host + "/myws";
    var ws = new WebSocket(api);

    //send
    function send() {
        //$.trim()删除字符串开始和末尾的空格
        if ($.trim($("#info").val()) == "") {
            layer.msg("不能发空信息");
            return;
        }
        var msg = {
            content: $("#info").val(),
            receiver: $("#rcv").val()
        };
        ws.send(JSON.stringify(msg));
        layer.msg("success");
        $("#info").val("");
    }


    ws.onopen = function () {
        //
    }
    ws.onclose = function () {
        //
    }
    ws.onmessage = function (e) {
        var msg = $.parseJSON(e.data);
        var row = "<div class='m-1'><span>" + msg.sender + "</span> : " + msg.content + "</div>";
        $("#chatbox").append(row);
        $("#chatbox")[0].scrollTop = $("#chatbox").height();
    }

</script>
</body>
</html>